<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-button type="primary" @click="AddClick()">添加</el-button>
				<el-input type="input" autosize placeholder="请输入用户ID" v-model="fy.memberId"
					@keyup.enter.native="SearchData" style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-input type="input" autosize placeholder="请输入手机号" v-model="fy.userName"
					@keyup.enter.native="SearchData" style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-select autosize v-model="fy.identity" placeholder="请选择报单中心">
					<el-option label="开启" value="0"> </el-option>
					<el-option label="关闭" value="1"> </el-option>
				</el-select>
				<el-select autosize v-model="fy.groupLevel" placeholder="请选择团队等级">
					<el-option label="零级" value="0"> </el-option>
					<el-option label="一级" value="1"> </el-option>
					<el-option label="二级" value="2"> </el-option>
					<el-option label="三级" value="3"> </el-option>
					<el-option label="四级" value="4"> </el-option>
					<el-option label="五级" value="5"> </el-option>
					<el-option label="六级" value="6"> </el-option>
				</el-select>
				<el-select placeholder="请选择排序" v-model="fy.number" clearable>
					<el-option label="无" :value="-1"></el-option>
					<el-option label="团队总业绩" :value="0"></el-option>
					<el-option label="认养券" :value="1"></el-option>
					<el-option label="鸡蛋" :value="2"></el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
			</div>
			<el-table :data="MemberList" border :header-cell-style="{textAlign: 'center'}"
				:row-class-name="tableRowClassName">
				//:cell-style="{'text-align':'center'}"
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="center" inline class="demo-table-expand">
							<div class="info">
								<el-form-item label="健康分">
									<span>{{ props.row.pointsStatic }}</span>
								</el-form-item>
								<!-- <el-form-item label="鸡蛋">
									<span>{{ props.row.pointsDynamic }}</span>
								</el-form-item> -->
								<el-form-item label="余额">
									<span>{{ props.row.cash }}</span>
								</el-form-item>
								<el-form-item label="消费券">
									<span>{{ props.row.shoppingVoucher }}</span>
								</el-form-item>
								<el-form-item label="自购(元)">
									<span>{{ props.row.selfBuying }}</span>
								</el-form-item>
							</div>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column prop="memberId" label="用户ID" width="90px" />
				<el-table-column prop="userName" label="手机号" />
				<el-table-column prop="nickName" label="昵称" />
				<!-- <el-table-column prop="sex" label="性别" width="50px">
					<template slot-scope="scope">
						<span v-if="scope.row.sex === 0">男</span>
						<span v-if="scope.row.sex === 1">女</span>
						<span v-if="scope.row.sex === 3">保密</span>
					</template>
				</el-table-column> -->
				<el-table-column prop="sharer" label="分享者" width="100px" />
				<el-table-column prop="adoptVoucher" label="认养券" width="80px">
				</el-table-column>
				<el-table-column prop="pointsDynamic" label="鸡蛋数量" />
				<el-table-column prop="chickenNum" label="鸡的数量" />
				<el-table-column prop="totalPerformance" label="团队总业绩" />
				<el-table-column prop="groupLevel" label="团队等级" width="90px" />
				<el-table-column prop="createTime" label="注册日期" width="150px" />
				<el-table-column label="操作" width="230px" v-if="menuKey==true">
					<template slot-scope="scope">
						<div class="button">
							<el-button type="primary" size="mini" @click="UpdateClick(scope.row)">修改</el-button>
							<el-button type="danger" size="mini" @click="DelClick(scope.row)">删除</el-button>
							<el-button type="success" size="mini" @click="ViewClick(scope.row.memberId)">查询上级
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-form label-position="left" label-width="80px" :model="ObjectList">
					<el-form-item label="手机号">
						<el-input placeholder="请输入手机号" v-model="ObjectList.userName"></el-input>
					</el-form-item>
					<el-form-item label="昵称">
						<el-input placeholder="请输入昵称" v-model="ObjectList.nickName"></el-input>
					</el-form-item>
					<el-form-item label="分享者">
						<el-input placeholder="请输入分享者" v-model="ObjectList.sharer"></el-input>
					</el-form-item>
					<el-form-item label="登录密码">
						<el-input placeholder="请输入登录密码" v-model="ObjectList.password"></el-input>
					</el-form-item>
					<el-form-item label="支付密码">
						<el-input placeholder="请输入支付密码" v-model="ObjectList.payPassword"></el-input>
					</el-form-item>

					<!-- <el-form-item label="性别">
						<el-select v-model="ObjectList.sex" placeholder="请选择">
							<el-option v-for="item in SexList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item> -->
					<!-- 	<el-form-item label="是否自动升降级" v-if="this.ObjectList.id">
						<el-select v-model="ObjectList.voluntarilyRelegation" placeholder="请选择">
							<el-option v-for="item in voluntarilyRelegationList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="是否激活" v-if="this.ObjectList.id&&!fuck">
						<el-select v-model="ObjectList.isActivation" placeholder="请选择">
							<el-option v-for="item in isActivationList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="报单中心">
						<el-select v-model="ObjectList.identity" placeholder="请选择">
							<el-option label="开启" value="0"> </el-option>
							<el-option label="关闭" value="1"> </el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="是否启用" v-if="this.ObjectList.id&&!fuck">
						<el-select v-model="ObjectList.enabled" placeholder="请选择">
							<el-option v-for="item in enabledList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="年龄">
						<el-input placeholder="请输入年龄" v-model="ObjectList.age"></el-input>
					</el-form-item> -->

					<el-form-item label="自购(元)" v-if="this.ObjectList.id">
						<el-input placeholder="请输入自购(元)" v-model="ObjectList.selfBuying" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="余额" v-if="this.ObjectList.id">
						<el-input placeholder="请输入余额" v-model="ObjectList.cash" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="认养券" v-if="this.ObjectList.id">
						<el-input placeholder="请输入认养券" v-model="ObjectList.adoptVoucher" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="健康分" v-if="this.ObjectList.id">
						<el-input placeholder="请输入健康分" v-model="ObjectList.pointsStatic" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="鸡蛋" v-if="this.ObjectList.id">
						<el-input placeholder="请输入鸡蛋" v-model="ObjectList.pointsDynamic" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="股权" v-if="this.ObjectList.id">
						<el-input placeholder="请输入股权" v-model="ObjectList.stockRight" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="消费券" v-if="this.ObjectList.id">
						<el-input placeholder="请输入消费券" v-model="ObjectList.shoppingVoucher" :disabled='fuck'>
						</el-input>
					</el-form-item>
					<el-form-item label="匠心鸡" v-if="this.ObjectList.id">
						<el-input placeholder="请输入匠心鸡" v-model="ObjectList.chickenCoupons" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="鸡的数量" v-if="this.ObjectList.id">
						<el-input placeholder="请输入鸡的数量" v-model="ObjectList.chickenNum" :disabled='fuck'></el-input>
					</el-form-item>
					<!-- 	<el-form-item label="总业绩" v-if="this.ObjectList.id">
						<el-input placeholder="请输入团队总业绩" v-model="ObjectList.groupPerformanceSum" disabled>
						</el-input>
					</el-form-item> -->
					<!-- <el-form-item label="团队实时业绩" v-if="this.ObjectList.id">
						<el-input placeholder="请输入团队实时业绩" v-model="ObjectList.groupPerformanceActual"></el-input>
					</el-form-item> -->
					<el-form-item label="已获取分红" v-if="this.ObjectList.id">
						<el-input placeholder="请输入已获取分红" v-model="ObjectList.getDividends" :disabled='fuck'></el-input>
					</el-form-item>
					<el-form-item label="团队等级" v-if="this.ObjectList.id">
						<el-input placeholder="请输入团队等级" v-model="ObjectList.groupLevel" :disabled='fuck'></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="ClickUser()">确 定</el-button>
				</span>
			</el-dialog>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as syMemberApi from "@/api/Add";
	import * as MemberApi from "@/api/Search";
	export default {
		data() {
			return {
				fuck: false,
				menuKey: false,
				MemberList: [],
				total: 0,
				fy: {
					size: 10,
					current: 1,
					memberId: "",
					number: -1,
				},
				dialogVisible: false,
				title: "",
				ObjectList: {
					userName: "",
					password: "",
					nickName: "",
					sex: "",
					age: "",
					sharer: "",
					payPassword: "",
					selfBuying: "",
				},
				userName: "",
				password: "",
				nickName: "",
				sharer: "",
				payPassword: "",
				BeiZhu: '',
				BeiZhu1: '',
				SexList: [{
						label: "男",
						value: 0,
					},
					{
						label: "女",
						value: 1,
					},
					{
						label: "保密",
						value: 3,
					},
				],
				voluntarilyRelegationList: [{
						label: "启用",
						value: 0,
					},
					{
						label: "禁用",
						value: 1,
					},
				],
				disabledStaticReleaseList: [{
						label: "启用",
						value: 0,
					},
					{
						label: "禁用",
						value: 1,
					},
				],
				disabledDynamicReleaseList: [{
						label: "启用",
						value: 0,
					},
					{
						label: "禁用",
						value: 1,
					},
				],
				isActivationList: [{
						label: "未激活",
						value: 0,
					},
					{
						label: "已激活",
						value: 1,
					},
				],
				enabledList: [{
						label: "启用",
						value: 0,
					},
					{
						label: "禁用",
						value: 1,
					},
				],
			};
		},
		methods: {
			// 表格隔行变色
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 === 1) {
					return 'success-row' //这是类名
				} else {
					return ''
				}
			},
			dateArrayTransfer(dateArray) {
				if (dateArray == null || dateArray == '') {
					return '无';
				}
				if (dateArray.length == 6) {
					var returnDate = dateArray[0] + "-" +
						this.returnDoubleNum(dateArray[1]) + "-" +
						this.returnDoubleNum(dateArray[2]) + " " +
						this.returnDoubleNum(dateArray[3]) + ":" +
						this.returnDoubleNum(dateArray[4]) + ":" +
						this.returnDoubleNum(dateArray[5]);
				} else {
					var returnDate = dateArray[0] + "-" +
						this.returnDoubleNum(dateArray[1]) + "-" +
						this.returnDoubleNum(dateArray[2]) + " " +
						this.returnDoubleNum(dateArray[3]) + ":" +
						this.returnDoubleNum(dateArray[4]) + ":00";
				}
				return returnDate;
			},
			returnDoubleNum(number) {
				return (Array(2).join(0) + number).slice(-2); //创建一个长度为2的数组，且默认用0填充；然后用传过来的数添加都右边，然后从右向左截取两位！
			},
			ViewClick(id) {
				this.$router.push({
					path: '/relation',
					query: {
						id: id
					}
				});
			},
			DelClick(row) {
				this.$confirm("确认删除？")
					.then((_) => {
						syMemberApi.DelMember({
							idList: row.id
						}).then((res) => {
							if (res.data == true) {
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "删除成功",
									type: "success",
								});
							}
						});
						done();
					})
					.catch((_) => {});
			},
			UpdateClick(row) {
				this.dialogVisible = true;
				this.title = "修改会员信息";
				syMemberApi.UpdateMemberID({
					memberId: row.memberId
				}).then((res) => {
					this.ObjectList = res.data;
					this.userName = this.ObjectList.userName;
					this.nickName = this.ObjectList.nickName;
					this.sharer = this.ObjectList.sharer;
					this.password = this.ObjectList.password;
					this.payPassword = this.ObjectList.payPassword
				});
			},
			AddClick() {
				this.title = "新增会员信息";
				this.dialogVisible = true;
				this.ObjectList = {};
			},
			ClickUser() {
				if (this.ObjectList.id) {
					syMemberApi.UpdateMember(this.ObjectList).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "修改成功",
								type: "success",
							});
							if (this.userName != this.ObjectList.userName) {
								this.BeiZhu += '手机号:' + this.userName
								this.BeiZhu1 += '手机号:' + this.ObjectList.userName
							}
							if (this.nickName != this.ObjectList.nickName) {
								this.BeiZhu += '昵称:' + this.nickName
								this.BeiZhu1 += '昵称:' + this.ObjectList.nickName
							}
							if (this.sharer != this.ObjectList.sharer) {
								this.BeiZhu += '推荐人:' + this.sharer
								this.BeiZhu1 += '推荐人:' + this.ObjectList.sharer
							}
							if (this.password != this.ObjectList.password) {
								this.BeiZhu += '登录密码:' + this.password
								this.BeiZhu1 += '登录密码:' + this.ObjectList.password
							}
							if (this.payPassword != this.ObjectList.payPassword) {
								this.BeiZhu += '支付密码:' + this.payPassword
								this.BeiZhu1 += '支付密码:' + this.ObjectList.payPassword
							}
							syMemberApi.AddKeFu({
								memberId: this.ObjectList.memberId,
								dataBeforeModification: this.BeiZhu,
								theModifiedData: this.BeiZhu1,
								modifiedByWhom: localStorage.getItem('user')
							})
							this.userName = '';
							this.nickName = '';
							this.sharer = '';
							this.password = '';
							this.payPassword = '';
							this.BeiZhu = '';
							this.BeiZhu1 = '';
						} else {
							this.$notify({
								title: "失败",
								message: "修改失败",
								type: "error",
							});
						}
					});
				} else {
					if (this.ObjectList.password == '' || this.ObjectList.password == null) {
						this.ObjectList.password = '123456'
					}
					if (this.ObjectList.payPassword == '' || this.ObjectList.payPassword == null) {
						this.ObjectList.payPassword = '123456'
					}
					syMemberApi.AddMember(this.ObjectList).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "新增成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "新增失败",
								type: "error",
							});
						}
					});
				}
			},
			SearchData() {
				MemberApi.InsertUser({
					...this.fy
				}).then((res) => {
					this.total = res.data.total;
					this.MemberList = res.data.records;
					this.MemberList.map(item => {
						item.createTime = this.dateArrayTransfer(item.createTime)
					})
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		created() {
			if (localStorage.getItem('user') == 'kefu66') {
				this.fuck = true
			}
			let roleMenuList = sessionStorage.getItem("roleMenuList")
			roleMenuList = JSON.parse(roleMenuList)
			for (let i = 0; i < roleMenuList.length; i++) {
				if (roleMenuList[i].menuKey == "yhglczqx") {
					this.menuKey = true
				}
			}
			this.SearchData();
		},
	};
</script>

<style lang="scss">
	.box-card {
		margin: auto;
		width: 95%;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-select {
		margin-left: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 20%;
	}

	.button {
		display: flex;
	}

	.info .el-form-item {
		width: 200px;
	}

	.success-row {
		background-color: #f6f7fb !important;
	}
</style>
